<template>
  <div>
    <Header></Header>
      <el-container id="container">
      <el-button type="primary" icon="el-icon-edit" id="edit" @click="edit" v-show="ownBlog"> 
      </el-button>
        <el-header
          ><h1>{{ blog.title }}</h1></el-header
        >
        <el-main class="content markdown-body" v-html="blog.content"></el-main>
      </el-container>

  </div>
</template>

<script>
import Header from "../components/Header";
import "github-markdown-css";
export default {
  name: "Detail",
  components: {
    Header,
  },
  data() {
    return {
      blog: {
        id: "",
        userId:"",
        title: "",
        content: "",
      },
      ownBlog:false
    };
  },
  created() {
    const blogId = this.$route.params.blogId;
    var that = this;
    console.log(blogId);
    if (blogId) {
      this.$axios.get("/blog/" + blogId).then((res) => {
        var blog = res.data.data;
        that.blog.id = blog.id;
        that.blog.title = blog.title;
        that.blog.content = blog.content;
        //引入md 支持工具
        var MarkdownIt = require("markdown-it");
        var md = new MarkdownIt();
        //将md格式渲染进网页
        var result = md.render(blog.content);
        that.blog.content = result;
        that.ownBlog=(blog.userId==this.$store.getters.getUser.id)
      });
    }
  },
  methods:{
    edit(){

      this.$router.push({name: 'BlogEdit', params: {blogId: this.blog.id}})
    }
  }
};
</script>

<style>

#container{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  min-height: 800px;
  width: 80%;
  margin: 0 auto;
}
#edit{
  position: relative;

  width: 54px;
}
.el-header,
.el-footer {
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 160px;
}
</style>
